<template>
  <div class="common-container">
    <div class="statistics">
      <div class="statistics_div" style="border-left: 8px solid #7367f0">
        <div>
          <span style="color: #7367f0">{{ totalCount }}</span>
          <span>探测器总数</span>
        </div>
        <div>
          <div class="icon-box" style="background: #7367f0">
            <i class="iconfont tanceqi"></i>
          </div>
        </div>
      </div>
      <div class="statistics_div" style="border-left: 8px solid #04bf98">
        <div>
          <span style="color: #04bf98">{{ normalCount }}</span>
          <span>探测器正常数</span>
        </div>
        <div>
          <div class="icon-box" style="background: #04bf98">
            <i class="iconfont duihao1" style="font-size: 32px"></i>
          </div>
        </div>
      </div>
      <div class="statistics_div" style="border-left: 8px solid #ffaa3a">
        <div>
          <span style="color: #ffaa3a">{{ breakdownCount }}</span>
          <span>探测器故障数</span>
        </div>
        <div>
          <div class="icon-box" style="background: #ffaa3a">
            <i class="iconfont gongju" style="font-size: 27px"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header_left">
        <el-input
          v-model="searchForm.detectorName"
          clearable
          @clear="clearDetectorName"
          placeholder="请输入探测器名称"
          size="small"
          style="width: 220px"
          maxlength="20"
        >
          <el-button
            slot="append"
            :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
            @click="searchClick"
          >
          </el-button>
        </el-input>

        <div
          style="margin-left: 20px; display: flex; align-items: center"
          v-permission="{ action: 'host:register' }"
        >
          <span style="margin-right: 5px; font-size: 14px">主动注册</span>
          <el-switch
            v-model="signValue"
            active-color="#7367f0"
            inactive-color="#666"
            @change="switchChange"
          >
          </el-switch>
          <div style="max-width: 500px">
            <el-tooltip effect="dark" placement="top-start">
              <div slot="content" style="max-width: 350px">
                传输设备（主机）添加到平台，但其下的探测器未添加到平台时，若开启了主动注册功能，在探测器有发生报警、故障等事件时，为避免事件丢失，会在平台上主动注册探测器，名称规则：设备名称（系统地址-回路号-通道号）；关闭主动注册功能，则不再主动注册探测器。
              </div>
              <i class="el-icon-question" style="margin-left: 8px"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="header_right">
        <el-button
          size="small"
          class="el_button"
          icon="el-icon-plus"
          @click="onAdd"
          v-permission="{ action: 'host:add' }"
          >新增</el-button
        >

        <!--   v-permission="{ action: 'terminal:import' }" -->
        <el-dropdown @command="onDropdown">
          <el-button class="el_button" size="small" style="margin-left: 15px">
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              command="import"
              v-permission="{ action: 'host:import' }"
              >导入</el-dropdown-item
            >
            <el-dropdown-item
              command="export"
              v-permission="{ action: 'host:export' }"
              >导出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content" style="height: calc(100% - 180px)">
      <el-table
        :data="dataList"
        height="calc(100% - 255px)"
        class="table"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
      >
        <!-- 
        @selection-change="batchSelect" -->
        <el-table-column
          align="center"
          type="selection"
          :reserve-selection="true"
          width="50"
        ></el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="detectorName"
          label="名称"
          min-width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceCode"
          label="探测器编码"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="detectorTypeName"
          label="型号"
          min-width="180"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="spaceName"
          label="安装点"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="备注"
          min-width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="online"
          label="位置标记"
          min-width="90"
        >
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.mark != ''"
              style="color: #28c76f; cursor: pointer"
              @click="updateMark(scope.row)"
            ></i>
            <i
              class="el-icon-error"
              v-else
              style="color: #f84242; cursor: pointer"
              @click="updateMark(scope.row)"
            ></i>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="status"
          label="状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.status == 1"
              >启用</el-tag
            >
            <el-tag type="danger" size="mini" v-else-if="scope.row.status == 0"
              >停用</el-tag
            >
            <span v-else>-</span>
          </template>
        </el-table-column>

        <!-- <el-table-column
          align="center"
          prop="online"
          label="在线"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.online == 1"
              >是</el-tag
            >
            <el-tag type="danger" size="mini" v-else>否</el-tag>
          </template>
        </el-table-column> -->

        <el-table-column
          align="center"
          prop="online"
          label="告警状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.isAlarm == 0"
              >正常</el-tag
            >
            <el-tag type="danger" size="mini" v-else>告警</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="online"
          label="故障状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag
              type="success"
              size="mini"
              v-if="scope.row.isMalfunction == 0"
              >正常</el-tag
            >
            <el-tag type="danger" size="mini" v-else>故障</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          min-width="160"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="management"
          label="操作"
          width="150"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="撤防时段"
              placement="bottom"
              v-if="false"
            >
              <!--    v-permission="{ action: 'device:time' }" -->
              <i
                @click="timeClick(row)"
                class="iconfont shijian tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="bottom"
              v-permission="{ action: 'host:detail' }"
            >
              <i
                @click="onDetail(row)"
                class="iconfont xiangqing tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
              v-permission="{ action: 'host:edit' }"
            >
              <i @click="onEdit(row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
              v-permission="{ action: 'host:delete' }"
            >
              <i @click="onDel(row)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @pagination="getDataList"
        class="pagination"
      >
      </pagination>
    </div>

    <DetectorAdd
      ref="refAdd"
      :parentDeviceInfo="parentDeviceInfo"
      :detectorInfo="detectorInfo"
    />

    <Detail ref="refDetail" :detectorInfo="detectorInfo" :roomId="roomId"/>

    <EditTime ref="refeditTime" :deviceInfo="detectorInfo" />

    <Ichnography
      ref="refIchnography"
      :parentDeviceInfo="parentDeviceInfo"
      :detectorInfo="detectorInfo"
    ></Ichnography>

    <Import ref="refImport" :deviceInfo="parentDeviceInfo" />
  </div>
</template>

<script>
import {
  reqDetectorStatistics,
  reqDetectorPage,
  reqDetectorDelete,
  reqFloorById,
  reqDetectorRegister,
  reqDetectorExport,
  reqGetDetails
} from "@api/api.js";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import DetectorAdd from "./DetectorAdd.vue";
import Detail from "./detail/index.vue";
import { mapState } from "vuex";
import EditTime from "@/views/deviceList/components/editTime.vue";
import Ichnography from "@/views/deviceList/host/components/Ichnography.vue";
import Import from "./Import.vue";

export default {
  name: "",
  props: ["deviceInfo"],
  components: {
    Pagination,
    DetectorAdd,
    EditTime,
    Detail,
    Ichnography,
    Import,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      showPopover: false, //v-model默认值是false, click激活变成true
      parentDeviceInfo: {}, //父级设备信息
      detectorInfo: {}, //设备一条信息

      totalCount: 0,
      normalCount: 0,
      breakdownCount: 0,

      signValue: true, //主动注册

      page: 1,
      limit: 10,
      total: 0,
      dataList: [],

      editId: "",

      searchForm: {
        online: "",
        productId: "",
        detectorName: "",
        minBattery: "",
        maxBattery: "",
        isAlarm: "",
        protocol: "",
        classMark: "",
        tamper: "",
      },
      classMark2: "",
      protocol2: "",
      loadingSearch: false,
      onLineList: [
        {
          value: 1,
          label: "在线",
        },
        {
          value: 0,
          label: "离线",
        },
      ],
      isAlarmList: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: 1,
          label: "告警",
        },
      ],
      tamperList: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "告警",
        },
      ],
      productList: [],
      batchDataList: [], //批量操作勾选的数据
      manufacturerList: [],
      flagIssued: true,
      flagalarm: true,
      idList: [],
      CommandInfo: [],
      roomId:"",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    getInit() {
      // console.log("deviceInfogetStatistics", this.deviceInfo);
      this.parentDeviceInfo = this.deviceInfo;
      this.signValue = this.parentDeviceInfo.activeRegister == 1 ? true : false;
      this.getInitDataList();
      this.getStatistics();
      this.getGetDetails();    // 消控室列表
    },

    // 消控室列表
    async getGetDetails() {
      let res = await reqGetDetails(this.deviceInfo.imei);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res,'res');
      this.roomId=res.data.info.id||''//消控室id
    },
    // 统计
    async getStatistics() {
      const res = await reqDetectorStatistics({
        parentId: this.parentDeviceInfo.id,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.totalCount = res.data.statistic.count || 0;
      this.normalCount = res.data.statistic.normalCount || 0;
      this.breakdownCount = res.data.statistic.malfunctionCount || 0;
    },

    // 获取设备列表
    async getDataList() {
      let {
        detectorName,
        online,
        productId,
        minBattery,
        maxBattery,
        isAlarm,
        tenantId,
        protocol,
        classMark,
        tamper,
      } = this.searchForm;
      const res = await reqDetectorPage(this.page, this.limit, {
        detectorName,
        // online,
        // productId,
        // minBattery,
        // maxBattery,
        // isAlarm,
        // tenantId,
        // protocol,
        // classMark,
        // tamper,
        parentId: this.parentDeviceInfo.id,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
      this.exportList = {
        online,
        productId,
        detectorName,
        minBattery,
        maxBattery,
        tenantId,
        tamper,
        isAlarm,
        classMark,
        protocol,
      };
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },

    clearDetectorName() {
      this.getInitDataList();
    },

    // 主动注册
    switchChange(e) {
      console.log("e", e);
      const tip = e ? "开启" : "关闭";

      this.$confirm(`此操作将${tip}自动注册, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqDetectorRegister({
            id: this.parentDeviceInfo.id,
            activeRegister: e ? 1 : 0,
          });

          let deviceInfo = this.parentDeviceInfo;
          deviceInfo.activeRegister = e ? 1 : 0;
          this.$store.commit("saveDeviceInfo", deviceInfo);

          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("设置成功");
        })
        .catch(() => {
          this.signValue = !this.signValue;
        });
    },
    // 新增
    onAdd() {
      this.detectorInfo = {};
      this.$refs.refAdd.dialogVisible = true;
    },
    // 编辑
    onEdit(row) {
      this.idList = [];
      this.detectorInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refAdd.dialogVisible = true;
    },
    onDetail(row) {
      this.$refs.refDetail.dialogVisible = true;
      this.detectorInfo = JSON.parse(JSON.stringify(row));
      this.detectorInfo.parentDeviceCode = this.parentDeviceInfo.imei; //请求探测器告警列表需要用传imei
      this.detectorInfo.info = "11"; //标识运维管理员不用传安装点id
    },
    // 修改标记点
    async updateMark(e) {
      console.log(e);
      this.editId = { id: e.id };
      this.detectorInfo = JSON.parse(JSON.stringify(e));
      // 获取平面图 图片
      const res = await reqFloorById(e.spaceId);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.rows.image == "")
        return this.$modal.notifyWarning("当前楼层暂无平面图,请上传后操作!");
      this.$refs.refIchnography.getimage(res.data.rows.image);
      this.$refs.refIchnography.dialogVisible = true;
      if (e.mark != "") {
        this.$refs.refIchnography.getMark(e.mark);
      }
    },
    // 撤防时段
    timeClick(row) {
      // console.log(row);
      this.detectorInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refeditTime.dialogVisible = true;
    },

    // 删除
    async onDel(row) {
      const result = await this.$confirm(
        `此操作将删除探测器：${row.detectorName}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqDetectorDelete(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
      this.getStatistics();
    },

    // 更多操作回调事件
    async onDropdown(e) {
      switch (e) {
        case "import":
          this.onImport();
          break;
        case "export":
          this.onExports();
          break;
      }
    },
    // 导入
    onImport() {
      this.$refs.refImport.dialogVisible = true;
    },
    // 导出
    async onExports() {
      const result = await this.$confirm(
        "此操作将导出探测器列表全部信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqDetectorExport({
        parentId: this.parentDeviceInfo.id,
        orgId: this.parentDeviceInfo.orgId,
        tenantId: this.user.tenantId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("导出成功，请在任务管理中查看");
      this.$router.push({
        name: "exportTask",
        params: { orgId: this.parentDeviceInfo.orgId },
      });
    },
  },
  created() {},
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.common-container {
  padding: 0 10px !important;
}

// 统计
.statistics {
  position: relative;
  // border-radius: 6px;
  // height: 20%;
  min-height: 120px;
  width: 100%;
  // margin-bottom: 18px;
  color: @primaryThemeTxtColor;
  display: flex;
  justify-content: space-around;
  // align-items: center;
  // padding: 20px 28px 28px 28px;
  padding: 0% 2% 1% 2%;
  box-sizing: border-box;
  border-bottom: 1px solid @primaryBorderColor;
  background: @primaryBgcolor;
  z-index: 9;

  .statistics_div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: @primarywarn;
    width: 25%;
    box-sizing: border-box;

    > div:first-of-type {
      display: flex;
      flex-direction: column;
      align-items: center;

      > span:first-of-type {
        margin-bottom: 3px;
        font-size: 30px;
      }

      > span:last-of-type {
        font-size: 12px;
      }
    }

    > div:last-of-type {
      width: 16%;
    }

    .icon-box {
      width: 50px;
      height: 50px;
      color: #fff;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 19px;
      }
    }
  }

  .item {
    box-sizing: border-box;
    border-radius: 6px;
    width: 49.4%;
    background: @primaryHeaderBgcolor;
    box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
    display: flex;
    align-items: center;
    justify-content: space-around;

    .citem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .number {
        font-size: 46px;
        margin-bottom: 4px;
      }

      .first {
        color: rgb(53, 163, 241);
      }

      .second {
        color: rgb(250, 156, 149);
      }

      .third {
        color: rgb(140, 219, 124);
      }

      .title {
        font-size: 13px;
        color: @primaryThemeTxtColor;
      }
    }
  }
}

::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .popover_from .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

::v-deep .el-button--small {
  border: none;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

/* 定义滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 10px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: @primaryBgcolor12; //定义滑块颜色
}

// 解决el-table固定列滚动错位问题
::v-deep
  .el-table
  .el-table__fixed-right
  .el-table__fixed-body-wrapper
  .el-table__body {
  padding-bottom: 10px !important;
}

// 解决el-table固定列挡住滚动条问题
::v-deep .el-table__fixed-right {
  height: auto !important;
  bottom: 10px !important; // 这个得自己调试看多少合适
}

// 去掉固定列下方的横线， 样式优化
::v-deep .el-table__fixed-right::before {
  display: none !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题  ,鼠标滑过td上作用的样式
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
}

//右边固定
// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__fixed-right tbody tr:hover > td {
  background-color: transparent !important;
}
</style>
